<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <view class="product-main-list">
                <product-list
                    v-if="loadOk"
                    :displayData="displayData"
                    :height="listHeight"
                    @sku="sku"
                    :isLimit="isLimit">
                </product-list>
            </view>
        </view>

        <uni-popup type="bottom" ref="popSku" @change="skuChange">
            <product-spec
                v-if="showPopSku"
                :data="optPopup.data"
                :fresh="optPopup.change"
                :popup-type="optPopup.type"
                @closePopup="closePopup"
                @addCart="addCart"
                @addBatch="addBatch"
                :tempType="3"
                @setCarListFunc="setCarListFunc"
                :isLimit="isLimit">
            </product-spec>
        </uni-popup>
        <view class="bottom-bar">
            <button class="btn btn-main btn-fill" @click="buyNow" :disabled="isDisable(getTempCartData)">
                立即购买
            </button>
        </view>
    </view>
</template>
<script>
import { mapGetters } from "vuex"
import productList from "@/pages_shop/components/accumulate/product-list.vue"
import productSpec from "@/components/product/product-spec.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { getUserOrderList } from "@/service/api/order.js"
import { getProductDisplay } from "@/utils/appInit.js"
import store from "@/store/index.js"
import { getUserCarList, AddOrUpdateTempAmount } from "@/service/api/member.js"
import { upTempCartForActivityFn } from "@/utils/tempCartUtil.js"
import orderType from "@/type/orderType.js"
export default {
    components: {
        productList,
        productSpec,
    },
    data() {
        return {
            config: {
                title: "限时限量",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            loadOk: false,
            listHeight: "",
            displayData: {},
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            showPopSku: false,
            activity: null,
            isLimit: true,
        }
    },
    watch: {
        //监听购物车数据
        getTempCartData(e) {},
    },
    computed: {
        ...mapGetters(["getTempCartData"]),
    },
    onLoad(e) {},
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        this.getListHeight()
        this.GetProductDisplay()
        //清除临时数据
        store.commit("SET_TEMP_CART", [])
    },
    methods: {
        // 获取整体显示设置
        GetProductDisplay() {
            getProductDisplay().then((res) => {
                if (res) {
                    this.displayData = res.Data
                }
            })
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        skuChange(e) {
            if (!e.show) {
                this.showPopSku = false
            }
        },
        sku(item) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = item
            this.$refs.popSku.open()
        },
        closePopup() {
            this.$refs.popSku.close()
        },
        buyNow() {
            let datas = this.getTempCartData
            let path = "?orderType=" + orderType.limit
            AddOrUpdateTempAmount(datas, path).then((res) => {
                if (res.State == 1) {
                    let param = {
                        isTempCar: true,
                    }
                    getUserCarList(param).then((e) => {
                        let ids = []
                        e.Data.forEach((item) => {
                            ids.push(item.ID)
                        })
                        if (this.isLimit) {
                            this.easyGoTo(
                                "/pages_shop/packet/order/submitOrder?ids=" +
                                    ids.join(",") +
                                    "&isTempCar=1" +
                                    "&isLimit=1",
                            )
                        } else {
                            this.easyGoTo(
                                "/pages_shop/packet/order/submitOrder?ids=" +
                                    ids.join(",") +
                                    "&isTempCar=1" +
                                    "&activityId=" +
                                    this.activity.id,
                            )
                        }
                    })
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        isDisable(getTempCartData) {
            if (!getTempCartData || getTempCartData.length < 1) {
                return true
            } else {
                let total = 0
                getTempCartData.forEach((e) => {
                    total += e.amount
                })
                return total == 0
            }
        },
        addCart(e) {
            e.forEach((item) => {
                upTempCartForActivityFn(item)
            })
            this.closePopup()
        },
    },
}
</script>

<style lang="scss">
.bottom-bar {
    .btn-main {
        margin-left: 0;
        border: none;
        border-radius: 100rpx;
    }
}
</style>
